<template>
  <div class="project-case company-dynamics">
    <section class="banner">
      <img src="@/assets/banner/home_pic_yj.png">
    </section>

    <section class="page">
      <Tabs v-model="pageIndex" class="tab-container" :animated="false">
        <TabPane 
          label="公司风采" 
          name="demeanor"
          class="padding-auto"
        >
          <div style="width: 1200px;padding-bottom: 200px;">
            <z-card
              class="company-card"
              v-for="(itemCard, indexCard) in cardData"
              :key="indexCard"
              :imgUrl="itemCard.imgUrl"
              :imgHeigth="'326px'"
            >
              <div slot="text">
                <Row class="card-content">
                  <Col span="6" class="card-date">
                    <div class="card-date-num">{{ itemCard.date }}</div>
                    <div class="card-date-icon">></div>
                  </Col>
                  <Col span="18" class="card-text">
                    <div class="card-text-title">{{ itemCard.title }}</div>
                    <div class="card-text-detail">{{ itemCard.detail }}</div>
                  </Col>
                </Row>
              </div>
            </z-card>
            <Page 
              class="pagination"
              :page-size="10"
              :total="cardData.length" 
            />
          </div>
        </TabPane>
        <TabPane 
          label="公司环境" 
          name="environment" 
          class="padding-auto"
        >
          <div style="width: 1200px;padding-bottom: 60px;">
            <img :src="'/imgs/home_pic_banner.png'" class="environment-bg" />
            <div class="environment-desc">
              我们以技术研发创新为主导，针对客户的差异化需求，利用核心技术为客户提供安全、稳定、高效的定制化解决方案。同时，在每一个项目背后我们会有一支有10年以上相关经验的技术和管理团队为之保驾护航，他们对物联网领 域有着深厚了解，在多变的商业环境中有独到的前瞻性
            </div>
            <div class="environment-line"></div>
            <div class="environment-desc">
              在多年的经营实践中，我们一直秉持着“诚信、创新、坚持、共赢”的经营理念，通过自主创新和真诚合作已经与中国移动、中国电信、中国建设银行等百余家企事业单位建立深度合作，合作范围遍布于医疗、移动通信、教育、电商等十余个重要行业。在未来，我们会继续这一领域深耕，不断探索物联网行业和商业应用的无限可能，与投资人、合作伙伴、员工共同成长，互惠互利，共赢未来
            </div>
            <Row :gutter="20" class="environment-imgs">
              <Col span="8">
                <div style="width: 100%;height: 280px;background-color: #ccc;margin-bottom: 20px;"></div>
                <div style="width: 100%;height: 482px;background-color: #ccc;"></div>
              </Col>
              <Col span="8">
                <div style="width: 100%;height: 782px;background-color: #ccc;"></div>
              </Col>
              <Col span="8">
                <div style="width: 100%;height: 482px;background-color: #ccc;margin-bottom: 20px;"></div>
                <div style="width: 100%;height: 280px;background-color: #ccc;"></div>
              </Col>
            </Row>
          </div>
        </TabPane>
        <TabPane 
          label="公司招聘" 
          name="recruit" 
          class="padding-auto"
        >
          <div style="width: 100%;">
            <div class="recruit-desc">
              <div class="recruit-desc-img">
                <img :src="'/imgs/home_pic_banner.png'">
              </div>
              <div>
                <div class="recruit-desc-item">
                  <span class="recruit-desc-index">1.</span>
                  <span class="recruit-desc-icon">/</span>
                  <span class="recruit-desc-text">公司库存的是一批漂亮的小姐姐和帅气的小哥哥，个个耐看耐聊无节操</span>
                </div>
                <div class="recruit-desc-item">
                  <span class="recruit-desc-index">2.</span>
                  <span class="recruit-desc-icon">/</span>
                  <span class="recruit-desc-text">每天下午茶包你吃够、有趣的小活动绵延不绝说到做到</span>
                </div>
                <div class="recruit-desc-item">
                  <span class="recruit-desc-index">3.</span>
                  <span class="recruit-desc-icon">/</span>
                  <span class="recruit-desc-text">体验各种风格客户，各种磨人的小妖精，其实我想说的是你能学到的更多</span>
                </div>
                <div class="recruit-desc-item">
                  <span class="recruit-desc-index">4.</span>
                  <span class="recruit-desc-icon">/</span>
                  <span class="recruit-desc-text">我们提倡高效，不鼓励加班</span>
                </div>
              </div>
            </div>

            <div class="recruit-job">
              <div class="recruit-job-item" v-for="(item, index) in jobData" :key="index">
                <div class="recruit-job-item-title">
                  <div class="recruit-job-item-title-cn">{{ item.title }}</div>
                  <div class="recruit-job-item-title-en">{{ item.titleEn }}</div>
                </div>
                <div class="recruit-job-item-desc">
                  <div class="recruit-job-item-desc-title">
                    工作职责：
                  </div>
                  <ul class="recruit-job-item-desc-sub" v-for="(itemDuty, indexDuty) in item.duty" :key="indexDuty">
                    <li>{{ itemDuty }}</li>
                  </ul>
                </div>
                <div class="recruit-job-item-desc">
                  <div class="recruit-job-item-desc-title">
                    职位要求：
                  </div>
                  <ul class="recruit-job-item-desc-sub" v-for="(itemRequest, indexRequest) in item.request" :key="indexRequest">
                    <li>{{ itemRequest }}</li>
                  </ul>
                </div>
                <div class="recruit-job-item-desc" v-if="item.future">
                  <div class="recruit-job-item-desc-title">
                    未来发展方向与晋升：
                  </div>
                  <ul class="recruit-job-item-desc-sub" v-for="(itemFuture, indexFuture) in item.future" :key="indexFuture">
                    <li>{{ itemFuture }}</li>
                  </ul>
                </div>
              </div>

              <div class="recruit-email">
                <p class="recruit-email-desc">
                  也可发送简历 stella@oudot.cn 邮件主题为：“职位+姓名”；或者你可以前往“前程无忧”投递简历
                  <a href="https://www.baidu.com/">
                    前程无忧
                  </a>
                </p>
                <p class="recruit-email-desc" style="margin-top: 10px;">
                  电话咨询：021-66308778
                </p>
              </div>
            </div>

          </div>
        </TabPane>
      </Tabs>

      <Breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <BreadcrumbItem>您的位置：<a href="/index">首页</a></BreadcrumbItem>
        <BreadcrumbItem class="breadcrumb-item">公司动态</BreadcrumbItem>
      </Breadcrumb>
    </section>
  </div>
</template>

<script>
//卡片
import zCard from "@/components/zCard.vue"
export default {
  data () {
    return {
      pageIndex: 'demeanor',
      cardData: [
        {
          imgUrl: `/imgs/home_pic_banner.png`,
          title: '韩国自由行团建活动',
          detail: '通过探索展览自身作为一种媒材的可能性，帕雷诺在过去二十年里对展览体 验做出了彻底的重新定义',
          date: '2018.12'
        }, {
          imgUrl: `/imgs/home_pic_banner.png`,
          title: '趣味公司团建',
          detail: '通过探索展览自身作为一种媒材的可能性，帕雷诺在过去二十年里对展览体 验做出了彻底的重新定义',
          date: '2018.10'
        }, {
          imgUrl: `/imgs/home_pic_banner.png`,
          title: '软陶活动',
          detail: '我们心灵手巧，智慧与美貌并存；我们特立独行，创造出的“欧点点”风格多 变。我们和睦友善，懂得团队合作带来的欣喜',
          date: '2018.06'
        }, {
          imgUrl: `/imgs/home_pic_banner.png`,
          title: '堆积木活动',
          detail: '我们心灵手巧，智慧与美貌并存；我们特立独行，创造出的“欧点点”风格多 变。我们和睦友善，懂得团队合作带来的欣喜',
          date: '2018.5'
        }, {
          imgUrl: `/imgs/home_pic_banner.png`,
          title: '手绘杯活动',
          detail: '通过探索展览自身作为一种媒材的可能性，帕雷诺在过去二十年里对展览体 验做出了彻底的重新定义',
          date: '2018.3'
        }, {
          imgUrl: `/imgs/home_pic_banner.png`,
          title: '技术培训',
          detail: '通过探索展览自身作为一种媒材的可能性，帕雷诺在过去二十年里对展览体 验做出了彻底的重新定义',
          date: '2017.12'
        }, {
          imgUrl: `/imgs/home_pic_banner.png`,
          title: '圣诞节活动',
          detail: '我们心灵手巧，智慧与美貌并存；我们特立独行，创造出的“欧点点”风格多 变。我们和睦友善，懂得团队合作带来的欣喜',
          date: '2017.12'
        }, {
          imgUrl: `/imgs/home_pic_banner.png`,
          title: '校园活动',
          detail: '我们心灵手巧，智慧与美貌并存；我们特立独行，创造出的“欧点点”风格多 变。我们和睦友善，懂得团队合作带来的欣喜',
          date: '2017.10'
        }, {
          imgUrl: `/imgs/home_pic_banner.png`,
          title: '长兴岛',
          detail: '通过探索展览自身作为一种媒材的可能性，帕雷诺在过去二十年里对展览体 验做出了彻底的重新定义',
          date: '2017.8'
        }, {
          imgUrl: `/imgs/home_pic_banner.png`,
          title: '中秋节',
          detail: '通过探索展览自身作为一种媒材的可能性，帕雷诺在过去二十年里对展览体 验做出了彻底的重新定义',
          date: '2017.10'
        }
      ],
      jobData: [
        {
          title: 'Java开发工程师',
          titleEn: 'Java Developement Engineer',
          duty: [
            '负责公司业务平台的设计，开发，优化等工作；',
            '使用Java语言开发B/S架构系统； ',
            '根据开发进度和任务分配，完成相应模块软件的设计、开发、编程任务；',
            '维护软件使之保持可用性和稳定性；'
          ],
          request: [
            '2-3年以上开发互联网或B/S架构系统工作经验；',
            '熟练使用jQuery，bootstrap等前端开发工具；',
            '熟悉常用的开源框架Spring MVC、Mybatis；',
            '精通数据库设计、SQL优化；',
            '熟悉Redis、Hadoop、mongodb等优先；',
            '有微信开发经验的优先；',
            '熟悉负载均衡策略，有高并发经验者优先；',
            '有上线产品的优先；',
            '有移动互联网产品开发经验，手机端web开发经验优先；',
            '有良好的团队合作意识、善于沟通，肯钻研学习，有耐心和责任心；具备良好的心理素质，能够承受一定的工作压力；'
          ]
        },
        {
          title: 'UI设计师',
          titleEn: 'UI Designer',
          duty: [
            '根据交互设计与产品规划，完成产品相关的用户界面视觉设计；',
            '根据产品运营规划与需求，整理制作相关材料与辅助素材； ',
            '与产品经理一起了解和分析用户的操作习惯和偏好，进行设计研究，不断从用户和细节设计的角度来深化对设计的理解；',
            '跟踪和监督产品用户满意度提升，不断改进移动端和网站系统的用户体验；'
          ],
          request: [
            '三年以上APP、web或PC端交互、视觉设计工作经验，热衷于研究体验各种APP应用（UI设计 平面设计 原图 至少会其中两项）；',
            '良好的创意思维和理解能力，善于协作与沟通，具备良好的团队合作精神，能承受一定的工作压力；',
            '熟悉iOS和安卓交互设计规范，对移动应用设计和趋势有系统的理解；',
            '精通Adobe Photoshop，Adobe Illustrator等主流设计软件',
            '提交应聘简历时需附独立完成个人作品;'
          ]
        },
        {
          title: 'Web前端开发工程师',
          titleEn: 'Web Front Development Engineer',
          duty: [
            '负责前端界面的构建，各类交互设计与实现;',
            '利用html5特性做出各种酷炫的动画效果;',
            '前端样式和脚本的模块设计及优化;',
            '配合后台开发人员完成项目;'
          ],
          request: [
            '本科及以上学历，计算机或相关专业者优先；',
            '精通XHTML/XML、CSS，熟悉页面架构和布局，对表现与数据分离、Web语义化等有深刻理解;',
            '对HTML5/CSS3等技术有一定了解，熟练使用canvas做各种动画效果，熟练使用less或sass进行前端开发;',
            '精通JavaScript、Ajax、DOM等前端技术，掌握面向对象编程思想;',
            '对js框架应用（如prototype/jQuery/YUI/Ext等）有一定的经验，熟悉AngularJS、React、Bootstrap优先;',
            '对css/JavaScript性能优化、解决多浏览器兼容性问题有一定的经验;',
            '对用户体验、交互操作流程、及用户需求有深入理解;',
            '有上线产品的优先；',
            '有强烈的上进心和求知欲，善于学习和运用新知识，善于沟通和逻辑表达，有强烈的团队意识和执行力;'
          ]
        },
        {
          title: '产品经理',
          titleEn: 'Product Manager',
          duty: [
            '主导产品规划，制定具竞争力的产品线组合；',
            '洞悉和理解市场与顾客需求，并转化为实际产品策略；',
            '进行深刻的竞品分析，建立独特的产品价值以强化品牌和竞争优势；',
            '协调项目团队和研发团队，顺利执行产品开发和上市流程；',
            '与营销和销售团队密切合作，建立基于顾客特性产品定位、营销策略和销售渠道；',
            '建立与保持良好的供应商合作关系，并进行定期评估；'
          ],
          request: [
            '计算机/互联网硬件相关产品规划经验；',
            '熟悉产品设计、生产和市场运作流程，对IT技术有一定了解；',
            '具有较强的市场导向和成本意识；',
            '优秀的沟通协调能力、处理问题能力，能在压力下顺利开展工作；',
            '有后台系统经验；',
            '上海人，医疗专业知识强的优先；'
          ]
        },
        {
          title: '宽带客户经理（偏外勤）',
          titleEn: 'Broadband Account Manager',
          duty: [
            '区域宽带经理全面统筹所负责区域的宽带业务发展和小区路演、小区物业公关等；',
            '全面详细了解负责区域的宽带资源，宽带渗透率等数据；',
            '根据梳理好的目标社区/小区进行拜访、拓展物业关系并可以设摊、制作广告宣传品（公益类型）；每周制定跑单计划，每天至少拜访3家并作数据收集；',
            '对接区域相关客户做定期汇报（汇报前先和总公司宽带经理提报）；每日图片发具至客户微信群；',
            '负责制定投单计划和设摊计划，并安排落实社区信箱投单/地推专员的工作；',
            '监督并管理地推专员的工作情况，钉钉汇报工作；',
            '每周不定期开碰头会，发现问题、提出问题、解决问题；'
          ],
          request: [
            '每周不定期开碰头会，发现问题、提出问题、解决问题；',
            '具有良好的沟通能力和应变能力；',
            '具备宽带行业相关从业经验；',
            '具有物业小区资源的优先考虑；'
          ]
        },
        {
          title: '文案策划',
          titleEn: 'Copy Planning',
          duty: [
            '负责根据公司发展需要策划并制定企业微信公众号的运营策略，提高公司品牌知名度；',
            '负责微信公众账号推广模式与渠道的探索，策划并执行微信营销线日常活动及跟踪、维护；',
            '负责了解、分析用户需求、情感及体验感受，收集用户反馈，即时掌握新闻热点，能够完成微信专题策划活动；',
            '策划微信线上及线下活动，编辑、撰写、更新公众号群发文章，协同美工完成宣传广告的主题与软文撰写，提升关注度；',
            '与微信的粉丝做好互动，对微信粉丝的网络行为进行分析与总结，主动挖掘用户兴趣点增加粉丝数，提升用户活跃度；',
            '配合完成市场部其它工作；'
          ],
          request: [
            '大专以上学历，汉语言文学、新闻类相关专业；',
            '一年以上的专职微信、微博等推广运营实际工作经验',
            '熟悉微博、微信平台等各种运营方式和推广手段，能够根据公司的需求独立策划线上推广方案并执行；有较强的文案创作和编写能力，能结合公司项目撰写出符合市场需要的软文；',
            '熟悉微博、微信平台等各种运营方式和推广手段，能够根据公司的需求独立策划线上推广方案并执行；有较强的文案创作和编写能力，能结合公司项目撰写出符合市场需要的软文；'
          ]
        },
        {
          title: '项目经理',
          titleEn: 'Project Manager',
          duty: [
            '负责维护公司现有客户资源，提出移动互联网相关产品营销方案的拟定及运营策略的可行性建议；',
            '负责与客户渠道沟通，获取业务需求，与运营经理合作沟通，确保产品有效推广以及满足客户方案需求，合理维护客户关系;',
            '负责与技术部、支撑部等部门紧密结合，确保产品实现进度和质量；',
            '把握移动互联网市场趋势，配合运营部、客服部进行相关的商务洽谈；'
          ],
          request: [
            '专业不限，大专以上学历，具有1年以上移动互联网行业经验者优先；',
            '有一定的移动互联网营销方案撰写能力；',
            '熟悉移动互联网产品运营, 对工作有热情，具有较强的沟通能力；',
            '男生，会上海话优先；'
          ]
        },
        {
          title: 'Java开发实习生',
          titleEn: 'Java Development Intern',
          duty: [
            '负责公司业务平台的设计，开发，优化等工作；',
            '全面详细了解负责区域的宽带资源，宽带渗透率等数据；',
            '根据开发进度和任务分配，完成相应模块软件的设计、开发、编程任务；',
            '维护软件使之保持可用性和稳定性；'
          ],
          request: [
            '有计算机语言基础者优先，如：C语言、C++、C#、JAVA、.Net、PHP等；',
            '计算机(网络)、软件工程相关专业，本科以上学历；',
            '熟悉jQuery，bootstrap等前端开发工具；',
            '熟悉常用的开源框架Spring MVC、Mybatis；',
            '熟悉数据库设计、SQL优化；',
            '熟悉Redis、Hadoop、mongodb等优先；',
            '能够尽快入职，长期稳定的工作'
          ],
          future: [
            '软件开发、编程、维护、测试、系统架构等；',
            '晋升通道：实习生—初级工程师—高级工程师—项目经理—技术总监'
          ]
        },
        {
          title: 'UI设计实习生',
          titleEn: 'UI Designer Intern',
          duty: [
            '与产品经理一起了解和分析用户的操作习惯和偏好，进行设计研究，不断从用户和细节设计的角度来深化对设计的理解'
          ],
          request: [
            '本科（大三大四实习生）视觉传达设计及相关专业；',
            '熟悉iOS和安卓交互设计规范，对移动应用设计和趋势有系统的理解；',
            '精通Adobe Photoshop，Adobe Illustrator等主流设计软件;'
          ]
        }
      ]
    }
  },
  mounted() {
  },
  methods: {
    changePage(label) {
      return label
    }
  },
  components: {
    zCard
  }
}
</script>

<style scoped>
.project-case {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #F5F5F5;
}
.padding-auto {
  display: flex;
  justify-content: center;
}
.banner {
  width: 100%;
  max-height: 360px;
  overflow: hidden;
}
.banner img {
  width: 100%;
}
.page {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  background-color: #fff;
}
.tab-container {
  width: 100%;
  padding-top: 42px;
  /*padding-left: calc((100% - 1240px) / 2);
  padding-right: calc((100% - 1240px) / 2);*/
}
.breadcrumb {
  position: absolute;
  right: calc((100% - 1200px) / 2 + 20px);
  top: 52px;
}
.company-card {
  width: 580px;
  height: 460px;
  cursor: pointer;
  margin: 0 40px 40px 0;
}
.company-card:nth-of-type(2n) {
  margin: 0 0 40px 0;
}
.pagination {
  position: absolute;
  right: calc((100% - 1200px) / 2 + 20px);
  bottom: 80px;
}
.card-content {

}
.card-date {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.card-date-num {
  font-size: 24px;
  color: rgba(51,51,51,1);
  line-height: 33px;
  margin-bottom: 20px;
}
.card-date-icon {
  font-size: 7px;
  color: rgba(153,153,153,1);
}
.card-text {
  
}
.company-card:hover {
  border-bottom: 1px solid rgba(0,136,222,1);
}
.company-card:hover .card-text-title {
  color: rgba(0,136,222,1);
}
.card-text-title {
  font-size: 16px;
  color: rgba(51,51,51,1);
  line-height: 22px;
  transition: 0.5s;
  margin: 24px 0 20px 0;
}
.card-text-detail {
  font-size: 12px;
  color: rgba(153,153,153,1);
  line-height: 17px;
}
.environment-bg {
  width: 1200px;
  margin-bottom: 80px;
}
.environment-desc {
  font-size: 14px;
  color: rgba(102,102,102,1);
  line-height: 20px;
}
.environment-line {
  width: 720px;
  height: 1px;
  background: rgba(230,230,230,1);
  margin: 40px 0;
}
.environment-imgs {
  width: 100%;
  margin: 80px 0 98px 0;
}
.recruit-desc {
  height: 280px;
  background: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  border-top: 1px solid #E6E6E6;
  padding-left: calc((100% - 1200px) / 2);
  padding-right: calc((100% - 1200px) / 2);
}
.recruit-desc-img {
  width: 260px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 0 42px 0 0;
}
.recruit-desc-img img {
  
}
.recruit-desc-item {
  margin: 10px 0;
}
.recruit-desc-index {
  font-size: 14px;
  color: rgba(102,102,102,1);
  line-height: 20px;
}
.recruit-desc-icon {
  font-size: 12px;
  color: #D8D8D8;
  margin: 0 10px 0 5px;
}
.recruit-desc-text {
  font-size: 14px;
  color: rgba(102,102,102,1);
  line-height: 20px;
}
.recruit-job {
  background: #F5F5F5;
  padding-left: calc((100% - 1200px) / 2);
  padding-right: calc((100% - 1200px) / 2);
  padding-bottom: 200px;
  overflow:hidden;
}
.recruit-job-item {
  float: left;
  display: inline-block;
  margin-right: 60px;
  width: 360px;
  max-height: 710px;
  margin-top: 120px;
}
.recruit-job-item:nth-of-type(3n) {
  margin-right: 0;
}
.recruit-job-item-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 360px;
  height: 100px;
  border-top: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
}
.recruit-job-item-title-cn {
  font-size: 16px;
  color: rgba(51,51,51,1);
  line-height: 22px;
}
.recruit-job-item-title-en {
  font-size: 12px;
  color: rgba(102,102,102,1);
  line-height: 14px;
  margin-top: 5px;
}
.recruit-job-item-desc {
  margin-top: 35px;
}
.recruit-job-item-desc-title {
  font-size: 14px;
  color: rgba(51,51,51,1);
  line-height: 20px;
}
.recruit-job-item-desc-sub {
  font-size: 12px;
  color: rgba(102,102,102,1);
  line-height: 17px;
  padding: 0 0 0 16px;
}
.recruit-job-item-desc-sub li {
  position: relative;
  list-style: none;
  margin-top: 8px;
}
.recruit-job-item-desc-sub li:before {
  content: '·';
  position: absolute;
  left: -10px;
}
.recruit-email {
  display: inline-block;
  width: 1200px;
  border-top: 1px solid #E6E6E6;
  text-align: center;
  margin-top: 120px;
}
.recruit-email-desc {
  margin-top: 40px;
  font-size: 14px;
  color: rgba(102,102,102,1);
  line-height: 20px;
}
.recruit-email a {
  font-size: 14px;
  color: rgba(0,136,222,1);
  line-height: 20px;
  border-bottom: 1px solid #0088DE;
  text-decoration: none;
  margin-left: 40px;
}
</style>
